<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-input v-model="orderQuery.orderNo" placeholder="订单编号"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="orderQuery.targetId" placeholder="课程id"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="orderQuery.memberId" placeholder="会员编号"/>
      </el-form-item>

      <el-form-item with="100">
        <el-select v-model="orderQuery.payType" clearable placeholder="支付方式">
          <el-option :value="1" label="微信支付"/>
          <el-option :value="2" label="支付宝支付"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="orderQuery.status" clearable placeholder="订单状态">
          <el-option :value="0" label="未支付"/>
          <el-option :value="1" label="已支付"/>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="orderQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      -
      <el-form-item>
        <el-date-picker
          v-model="orderQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
      <el-button type="default" icon="el-icon-refresh" size="small" @click="resetData()">清空</el-button>

    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (orderQuery.pageNum - 1) * orderQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="orderNo" label="订单编号" width="180"/>
      <el-table-column label="课程名称" width="280">
        <template slot-scope="scope">
          <div>{{scope.row.courseTitle}}</div>
          <div style="text-align: center;">
            <el-link @click="showCourseInfo(scope.row.courser)" type="primary">[详情]</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="下单会员">
        <template slot-scope="scope">
          <div>{{scope.row.userInfoVo.email}}</div>
          <div style="text-align: center;">
            <el-link @click="showMemberInfo(scope.row.userInfoVo)" type="primary">[详情]</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalFee" label="价格"/>
      <el-table-column label="支付类型">
        <template slot-scope="scope">
          {{ $enum.getDescByValue('PAY_TYPE',scope.row.payType || -1)}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope" style="">
          <div v-if="scope.row.status===1">
            <el-tag type="success">已支付</el-tag>

            <el-tooltip class="item" effect="dark" content="点击查看" placement="top">
              <el-link @click="showPayLog(scope.row.payLog,scope.row.courseTitle)" type="primary">查看凭证</el-link>
            </el-tooltip>
          </div>
          <el-tag type="info" v-else>未支付</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="gmtCreate" label="添加时间" sortable width="160"/>


    </el-table>

    <el-dialog :visible.sync="dialogFormVisible" top="15vh" width="600px">
      <div class="payLog">
        <div class="header">
          <p class="title">{{payLog.courseTitle}}</p>
          <p class="fee">-{{payLog.totalFee}}</p>
        </div>
        <hr>
        <el-row :gutter="20">
          <el-col :span="4">当前状态</el-col>
          <el-col :span="20">{{payLog.payType===2?'支付成功':'支付失败'}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">商品</el-col>
          <el-col :span="20">{{payLog.courseTitle}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">支付时间</el-col>
          <el-col :span="20">{{payLog.gmtCreate}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">交易单号</el-col>
          <el-col :span="20">{{payLog.transactionId}}</el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog  title="课程信息" :visible.sync="dialogVisibleCourse" width="50%">
      <el-card class="box-card">
       <div>
        <h3>{{course.title}}</h3>
       </div>
        <img :src="course.cover" :alt="course.title" style="width: 350px">
        <div class="el-divider el-divider--horizontal"><div class="el-divider__text is-center">简介</div></div>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">id：{{course.id}}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">价格：￥{{course.price}} </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">课程类别：<span class="course-tag" :class="'tag'+course.courseType">{{$enum.getDescByValue("COURSE_TYPE",course.courseType || 1)}}</span></div></el-col>
        </el-row>

      </el-card>

    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="dialogVisibleUser" width="50%">
      <el-card class="box-card">
        <div style="text-align: center">
          <h3 >{{user.nickname}}</h3>
          <p><img :src="user.avatar" :alt="course.title" style="width: 100px;margin: 0 auto"></p>

        </div>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple-light">联系方式：{{user.email || user}}</div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">性别：{{user.sex===1?"男":"女"}} </div></el-col>
        </el-row>


      </el-card>

    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      :current-page="orderQuery.pageNum"
      :page-size="orderQuery.pageSize"
      :total="total"
      background
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        listLoading: true, // 是否显示loading信息
        list: null, //查询后返回数据
        total: 0, //总记录数
        orderQuery: {
          pageNum: 1, //当前页
          pageSize: 5, //每页记录数
        },//条件封装对象
        dialogFormVisible: false,
        payLog: {},
        dialogVisibleCourse: false,
        course: {
          targetId:''
        },
        dialogVisibleUser:false,
        user:{}

      }
    },
    created() {
      this.getList()
    },
    methods: {
      //获取列表
      getList(page = 1) {
        //查询列表
        if (!this.hasPerm('order:list')) {
          return
        }
        this.orderQuery.pageNum = page
        this.api({
          url: `/order/pageListOrderCondition`,
          method: "post",
          data: this.orderQuery
        }).then(data => {
          console.log(data)
          this.list = data.list //列表
          this.total = data.totalCount //总数
          this.listLoading = false
        })
      },
      //重置查询条件
      resetData() {
        this.orderQuery = {}
        this.getList()
      },
      showPayLog(payLog, courseTitle) {
        this.payLog = payLog;
        // this.payLog.attr = JSON.parse(payLog.attr)
        this.payLog.courseTitle = courseTitle
        this.dialogFormVisible = true;
      }, showCourseInfo(courser) {
        this.dialogVisibleCourse=true
        this.course=courser
      }, showMemberInfo(user) {
        this.dialogVisibleUser=true
        this.user =user
      }
      /*//删除
      removeDataById(id) {
        // debugger
        //MessageBox 在utils/request.js中已引用
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/teacher/${id}`,
            method: "delete",
          })
        }).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      },*/


    }

  }
</script>

<style scoped>
  .grid-content{
    color: #000;
  }
  .el-row{
    margin: 15px 0;
  }
  .course-tag{
    padding: 5px;
    color: #fff;
    border-radius: 5px;
  }
   .tag1{
    background: green;
  }
   .tag2{
    background: #00abfc;
  }
   .tag4{
    background: #c01920;
  }
  .payLog .header {
    width: 302px;
    margin: 0 auto;
    text-align: center;
  }

  .payLog .header .title {
    /*font-weight: bold;*/
    font-size: 18px;
  }

  .payLog .header .fee {
    font-weight: bold;
    font-size: 24px;
  }
  .el-row > div:nth-child(1) {
    color: #9E9E9E;
  }
</style>
